<template>
  <div style="padding: 15px;">
    <div style="margin-bottom: 15px;">
      <Input style="width: 200px;" v-model="staffName" placeholder="请输入学生姓名"/>
      <Input style="width: 200px;" v-model="mobile" placeholder="请输入学生手机号"/>
      <!--<Select v-model="areaModel" style="width:200px" placeholder="请选择机构省份">-->
        <!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--</Select>-->
      <Button @click="searchStudent" type="success">搜索</Button>
      <!--<Button @click="batchAddStudent" type="primary" style="float: right;margin-left: 10px;">批量添加</Button>-->
      <Button @click="add" type="primary" style="float: right;">添加学生</Button>
    </div>
    <Table border :columns="studentTitle" :data="studentList"></Table>
    <page-com :total="total" @page-change="pageChange"></page-com>
    <Modal v-model="orgStudentModal" :title="modalTitle" @on-ok="submit" @on-cancel="cancel">
      <Form :model="orgStudentForm" :label-width="80">
        <FormItem label="学生姓名">
          <Input v-model="orgStudentForm.staffName" placeholder="请输入学生姓名"/>
        </FormItem>
        <FormItem label="联系电话">
          <Input v-model="orgStudentForm.mobile" placeholder="请输入联系电话"/>
        </FormItem>
      </Form>
    </Modal>
    <!--<Modal v-model="orgBatchAddStudentModal" :title="modalTitle" @on-ok="ok" @on-cancel="cancel">-->
      <!--<Alert show-icon>-->
        <!--下载导入模板-->
        <!--<Icon type="ios-bulb-outline" slot="icon"></Icon>-->
        <!--<template slot="desc">下载学生批量导入模板请&nbsp;&nbsp;<Button type="primary">点击这里</Button>&nbsp;&nbsp;下载，下载后请严格按照要求添加学生信息，否则将会导入失败。</template>-->
      <!--</Alert>-->
      <!--<Form :model="orgStudentForm" :label-width="80">-->
        <!--<FormItem label="选择文件">-->
          <!--<Upload action="//jsonplaceholder.typicode.com/posts/">-->
            <!--<Button icon="ios-cloud-upload-outline">上传文件</Button>-->
          <!--</Upload>-->
        <!--</FormItem>-->
      <!--</Form>-->
    <!--</Modal>-->
  </div>
</template>

<script>
  import PageCom from '@/components/page'
  import {formatDate} from '_com/date'
  export default {
    name: 'student-list',
    components: {
      PageCom
    },
    data () {
      return {
        number: 0,
        size: 10,
        total: 0,
        staffName: '',
        mobile: '',
        orgStudentForm: {},
        studentTitle: [
          {
            title: '学生姓名',
            key: 'staffName',
            align: 'center'
          },
          {
            title: '账户名',
            key: 'loginName',
            align: 'center'
          },
          {
            title: '联系电话',
            key: 'mobile',
            align: 'center'
          },
          // {
          //   title: '学习节次',
          //   key: 'learntChapter',
          //   align: 'center'
          // },
          // {
          //   title: '消费金额',
          //   key: 'consume',
          //   align: 'center'
          // },
          {
            title: '注册时间',
            key: 'createTime',
            align: 'center',
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editor()
                      let row = params.row
                      this.orgStudentForm.staffName = row.staffName
                      this.orgStudentForm.mobile = row.mobile
                      this.orgStudentForm.id = row.id
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定要删除吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                          this.remove(params.row.id)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        studentList: [],
        areaModel: '',
        orgStudentModal: false,
        modalTitle: '',
        orgBatchAddStudentModal: false
      }
    },
    mounted() {
      this.studentPage()
    },
    methods: {
      studentPage() {
        this.$get('/api/api/org/student/page', {
          staffName: this.staffName,
          mobile: this.mobile,
          size: this.size,
          number: this.number
        }).then((res) => {
          if (res.code === 0) {
            this.studentList = res.data
            this.total = res.total
          }
        })
      },
      title(title) {
        this.modalTitle = title
        this.orgStudentModal = true
      },
      add() {
        this.title('添加学生')
      },
      editor() {
        this.title('编辑学生')
      },
      submit() {
        if (this.modalTitle === '添加学生') {
          this.addOrg()
        } else {
          this.theEditor()
        }
      },
      addOrg() {
        this.$post('/api/api/org/student/add', this.orgStudentForm).then((res) => {
          if (res.code === 0) {
            this.$Message.success('添加成功')
            this.studentPage()
            this.cancel()
          } else {
            this.$Message.error('添加失败')
          }
        }).catch((res) => {
          this.$Message.error('添加失败')
        })
      },
      theEditor() {
        this.$put('/api/api/org/student/update', this.orgStudentForm).then((res) => {
          if (res.code === 0) {
            this.$Message.success('修改成功')
            this.studentPage()
            this.cancel()
          } else {
            this.$Message.error('修改失败')
          }
        }).catch((res) => {
          this.$Message.error('修改失败')
        })
      },
      remove(id) {
        this.$deletes('/api/api/org/student/delete', {id: id}).then((res) => {
          if (res.code === 0) {
            this.$Message.success('删除成功')
            this.studentPage()
          } else {
            this.$Message.error('删除失败')
          }
        }).catch((res) => {
          this.$Message.error('删除失败')
        })
      },
      searchStudent() {
        this.studentPage()
      },
      cancel() {
        this.orgStudentForm = {}
      },
      pageChange(data) {
        this.number = data
      },
      batchAddStudent () {
        this.orgBatchAddStudentModal = true
        this.modalTitle = '批量添加学生'
      }
    }
  }
</script>

<style scoped>

</style>
